<template>
    <!-- 骨架屏 -->
    <van-skeleton title :row="3" v-if="status" />
    <div v-else>
        <!-- 导航 -->
        <van-nav-bar title="xx首页详情" fixed />
        <div style="height: 45px;"></div>
        <!-- 标签 -->
        <van-tabs v-model:active="active" animated>
            <van-tab title="购物首页">内容 1</van-tab>
            <van-tab title="商品介绍">内容 2</van-tab>
            <van-tab title="售后处理">内容 3</van-tab>
            <van-tab title="名牌衣服">内容 4</van-tab>
            <van-tab title="名牌鞋子">内容 4</van-tab>
            <van-tab title="名牌书包">内容 4</van-tab>
        </van-tabs>
        <search></search>
        <swiper></swiper>
        <!-- 宫格 -->
        <van-grid :column-num="4">
            <van-grid-item v-for="item in catitemsApiData" :icon="item.image_src" :text="item.name" />
        </van-grid>
      
        <!-- 倒计时 -->
        <div class="mm">
            <h4>热门话题</h4>
            <div class="tit">
                <span>10</span>
                <span>58</span>
                <span>10</span>
            </div>

        </div>

        <div class="yhj">
           <div class="ck">
             <h4 style="float: left;"> 优惠劵</h4> <h4 style="float: right;"> 查看更多》》 </h4>
           </div>
             <van-grid :column-num="4">
            <van-grid-item v-for="item in catitemsApiData" :icon="item.image_src" :text="item.name" />
        </van-grid>
           <div class="mmm">
            <h4>热门话题</h4>
            <div class="tit">
                <span>10</span>
                <span>58</span>
                <span>10</span>
            </div>

        </div>   
        <div class="mmm">
            <h4>热门话题</h4>
            <div class="tit">
                <span>10</span>
                <span>58</span>
                <span>10</span>
            </div>

        </div>
        <div class="kp">
             <van-card num="2" price="2.00" desc="描述信息" title="商品标题"
            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" />
        <van-card num="2" price="2.00" desc="描述信息" title="商品标题"
            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" />
        <van-card num="2" price="2.00" desc="描述信息" title="商品标题"
            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" />
        </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import swiper from '@/components/swiper.vue'
import search from '@/components/search.vue'


let status = ref(true)
setTimeout(() => {
    status.value = false
}, 2000);


import {catitemsApi} from '@/api/api'
let catitemsApiData=ref([])
catitemsApi().then(res=>{
    console.log('宫格数据',res);
    catitemsApiData.value=res.data.message
})
</script>

<style scoped>
.ck{
    width: 100%;
    display: inline-block;
}
.kp{
    width: 100%;
    height: 400px;
    display: inline-block;
}

.yhj{
    width: 100%;
    height: 200px;
    display: inline-block;
}
.mm {
    width: 100px;
    height: 150px;
float: left;
margin-left: 20px;
}
.mmm {
    width: 100px;
    height: 150px;
float: left;
margin-left: 20px;
}


.tit span {
    display: inline-block;
    padding: 5px 8px;
    background-color: aqua;
}
</style>